<template>
  <div>
    <el-row class="mb20" type="flex" justify="space-between" :gutter="20">
      <el-col :span="12" :offset="0">
        <el-card class="box-card h100">
          <div class="box-head mb20">
            <span class="title">皮肤病大赛-活动海报</span>
            <div class="btns">
              <el-button v-has-permi="['/wx/menu/postUpdateWxTag']" type="primary" @click="handleAdd('activity')">新建</el-button>
            </div>
          </div>
          <el-table v-loading="listLoading" :data="dataList" stripe border row-key="id">
            <el-table-column label="序号" align="center" width="60px">
              <template slot-scope="{$index}">
                <span>{{ $index+1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="海报名称" align="center" prop="tagName">
              <template slot-scope="{row}">
                <span>{{ row.tagName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="预览" align="center" width="100px">
              <template slot-scope="{}">
                <el-image
                  style="width: 80px; height: 80px"
                  :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"
                  :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']">
                </el-image>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="{row}">
                <el-button v-has-permi="['/wx/menu/postUpdateWxTag']" type="text" @click="handleAdd('activity', row)">编辑</el-button>
                <el-button v-has-permi="['/wx/menu/postDelWxTag']" type="text" @click="handleDelete(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 添加或修改菜单 -->
          <el-dialog :title="(formActivityModel.id?'编辑':'新增')+'活动海报'" :visible.sync="formVisible.activity" width="600px" append-to-body>
            <el-form ref="activity" :model="formActivityModel" :rules="formActivityModelRules" label-width="150px">
              <el-form-item label="海报名称" prop="name">
                <el-input v-model.trim="formActivityModel.name" style="width: 80%" clearable placeholder="请输入海报名称" maxlength="12" />
              </el-form-item>
              <el-form-item label="海报图片" prop="img">
                <upload-img v-model="formActivityModel.img" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="formVisible.activity=!formVisible.activity;reset('activity');">取 消</el-button>
              <el-button :loading="submitLoading.activity" type="primary" @click="submitForm('activity')">确 定</el-button>
            </div>
          </el-dialog>
        </el-card>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-card class="box-card h100">
          <div class="box-head mb20">
            <span class="title">皮肤病大赛-学习页面海报</span>
            <div class="btns">
              <el-button v-has-permi="['/wx/menu/postUpdateWxTag']" type="primary" @click="handleAdd('study')">新建</el-button>
            </div>
          </div>
          <el-table v-loading="listLoading" :data="dataList" stripe border row-key="id">
            <el-table-column label="序号" align="center" width="60px">
              <template slot-scope="{$index}">
                <span>{{ $index+1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="海报名称" align="center" prop="tagName">
              <template slot-scope="{row}">
                <span>{{ row.tagName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="预览" align="center" width="100px">
              <template slot-scope="{}">
                <el-image
                  style="width: 80px; height: 80px"
                  :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"
                  :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']">
                </el-image>
              </template>
            </el-table-column>
            <el-table-column label="小鹅通链接" align="center" prop="tagName">
              <template slot-scope="{row}">
                <span>{{ row.tagName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="{row}">
                <el-button v-has-permi="['/wx/menu/postUpdateWxTag']" type="text" @click="handleAdd('study', row)">编辑</el-button>
                <el-button v-has-permi="['/wx/menu/postDelWxTag']" type="text" @click="handleDelete(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 添加或修改菜单 -->
          <el-dialog :title="(formStudyModel.id?'编辑':'新增')+'学习页面海报'" :visible.sync="formVisible.study" width="600px" append-to-body>
            <el-form ref="study" :model="formStudyModel" :rules="formStudyModelRules" label-width="150px">
              <el-form-item label="海报名称" prop="name">
                <el-input v-model.trim="formStudyModel.name" style="width: 80%" clearable placeholder="请输入海报名称" maxlength="30" />
              </el-form-item>
              <el-form-item label="海报图片" prop="img">
                <upload-img v-model="formActivityModel.img" />
              </el-form-item>
              <el-form-item label="小鹅通地址" prop="name">
                <el-input v-model.trim="formStudyModel.name" style="width: 80%" clearable placeholder="请输入小鹅通地址" maxlength="30" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="formVisible.study=!formVisible.study;reset('study');">取 消</el-button>
              <el-button :loading="submitLoading.study" type="primary" @click="submitForm('study')">确 定</el-button>
            </div>
          </el-dialog>
        </el-card>
      </el-col>
    </el-row>
    <!-- 考核设置 -->
    <el-row class="mb20" type="flex" justify="space-between" :gutter="20">
      <el-col :span="12" :offset="0">
        <el-card class="box-card h100">
          <div class="box-head mb20">
            <span class="title">皮肤病大赛-考核设置（医生）</span>
          </div>
          <el-table v-loading="listLoading" :data="dataList" stripe border row-key="id">
            <el-table-column label="考核名称" align="center" prop="tagName">
              <template slot-scope="{row}">
                <span>{{ row.tagName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="考核时间" align="center" prop="createTime">
              <template slot-scope="{row}">
                <span>{{ row.createTime | parseTime('{y}-{m}-{d}') }} - {{ row.createTime | parseTime('{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="{row}">
                <el-button type="text" @click="handleDelete(row.id)">查看详情</el-button>
                <el-button type="text" @click="handleUpdate(row)">设置</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 添加或修改菜单 -->
          <el-dialog :title="(formModel.id?'编辑':'新增')+'菜单'" :visible.sync="formVisible.f" width="600px" append-to-body>
            <el-form ref="formModel" :model="formModel" :rules="formModelRules" label-width="150px">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="标签名称" prop="name">
                    <el-input v-model.trim="formModel.name" style="width: 200px" clearable placeholder="请输入标签名称" maxlength="12" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="formVisible=!formVisible;reset;">取 消</el-button>
              <el-button :loading="submitLoading.d" type="primary" @click="submitForm">确 定</el-button>
            </div>
          </el-dialog>
        </el-card>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-card class="box-card h100">
          <div class="box-head mb20">
            <span class="title">皮肤病大赛-考核设置（学生）</span>
          </div>
          <el-table v-loading="listLoading" :data="dataList" stripe border row-key="id">
            <el-table-column label="考核名称" align="center" prop="tagName">
              <template slot-scope="{row}">
                <span>{{ row.tagName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="考核时间" align="center" prop="createTime">
              <template slot-scope="{row}">
                <span>{{ row.createTime | parseTime('{y}-{m}-{d}') }} - {{ row.createTime | parseTime('{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="{row}">
                <el-button type="text" @click="handleDelete(row.id)">查看详情</el-button>
                <el-button type="text" @click="handleUpdate(row)">设置</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 添加或修改菜单 -->
          <el-dialog :title="(formModel.id?'编辑':'新增')+'菜单'" :visible.sync="formVisible.d" width="600px" append-to-body>
            <el-form ref="formModel" :model="formModel" :rules="formModelRules" label-width="150px">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="标签名称" prop="name">
                    <el-input v-model.trim="formModel.name" style="width: 200px" clearable placeholder="请输入标签名称" maxlength="12" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="formVisible=!formVisible;reset;">取 消</el-button>
              <el-button :loading="submitLoading.x" type="primary" @click="submitForm">确 定</el-button>
            </div>
          </el-dialog>
        </el-card>
      </el-col>
    </el-row>
    <el-card class="box-card mb20">
      <div class="box-head">
        <span class="title">皮肤病大赛-知识考核题库</span>
        <div class="btns">
          <el-form ref="queryForm" :model="query" :inline="true" label-width="0">
            <el-form-item label="" label-width="0" prop="name">
              <el-input v-model.trim="query.name" placeholder="题目名称" clearable @change="handleQuery" />
            </el-form-item>
            <el-form-item label="" prop="name">
              <el-select style="width: 100px;" v-model="query.type" placeholder="全部">
                <el-option label="皮肤基础" :value="0"></el-option>
                <el-option label="基础实验室诊断" :value="1"></el-option>
                <el-option label="诊断思路" :value="2"></el-option>
                <el-option label="各病诊疗" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="name">
              <el-select style="width: 100px;" v-model="query.type" placeholder="全部">
                <el-option label="医生" :value="0"></el-option>
                <el-option label="学生" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
              <el-button type="primary" icon="el-icon-plus" v-has-permi="['/wx/menu/postAddWxTag']" @click="handleAdd('exam')">新增</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table v-loading="listLoading" :data="dataList" stripe border row-key="id">
        <el-table-column label="序号" align="center" width="60px">
          <template slot-scope="{$index}">
            <span>{{ $index+1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="题目名称" align="center">
          <template slot-scope="{row}">
            <span>{{ row.tagName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分类" align="center" prop="tagName">
          <template slot-scope="{row}">
            <span>{{ row.tagName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分值" align="center" prop="tagName">
          <template slot-scope="{row}">
            <span>{{ row.tagName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button v-has-permi="['/wx/menu/postUpdateWxTag']" type="text" @click="handleAdd('exam', row)">编辑</el-button>
            <el-button v-has-permi="['/wx/menu/postDelWxTag']" type="text" @click="handleDelete(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize" @pagination="handleQuery" />
      <!-- 添加或修改 -->
      <el-dialog :title="(formExamModel.id?'编辑':'新增')+'考题'" :visible.sync="formVisible.exam" width="600px" append-to-body>
        <el-form ref="exam" :model="formExamModel" :rules="formExamModelRules" label-width="100px">
          <el-form-item label="题目:" prop="name">
            <el-input v-model.trim="formExamModel.name" style="width: 80%" clearable placeholder="请输入题目" maxlength="12" />
          </el-form-item>
          <el-form-item label=" ">
            <upload-img v-model="formExamModel.img" />
          </el-form-item>
          <el-form-item label="分类:">
            <el-select style="width: 200px;" v-model="formExamModel.type" placeholder="请选择">
              <el-option label="皮肤基础" :value="0"></el-option>
              <el-option label="基础实验室诊断" :value="1"></el-option>
              <el-option label="诊断思路" :value="2"></el-option>
              <el-option label="各病诊疗" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分值:">
            <el-input-number v-model="formExamModel.num" controls-position="right" :min="1" :max="100"></el-input-number>
          </el-form-item>
          <el-form-item label="适用范围:">
            <el-select style="width: 100px;" v-model="formExamModel.ss" placeholder="请选择">
              <el-option label="医生" :value="0"></el-option>
              <el-option label="学生" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="formVisible.exam=!formVisible.exam;reset('exam');">取 消</el-button>
          <el-button :loading="submitLoading.exam" type="primary" @click="submitForm('exam')">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
    <el-card class="box-card mb20">
      <div class="box-head">
        <span class="title">皮肤病大赛-规则</span>
        <div class="btns">
          <el-form ref="queryForm" :model="query" :inline="true" label-width="0">
            <el-form-item label="" label-width="0" prop="name">
              <el-input v-model.trim="query.name" placeholder="规则名称" clearable @change="handleQuery" />
            </el-form-item>
            <el-form-item label="" prop="name">
              <el-select style="width: 100px;" v-model="query.type" placeholder="全部">
                <el-option label="首页" :value="0"></el-option>
                <el-option label="知识考核" :value="1"></el-option>
                <el-option label="实战比拼" :value="2"></el-option>
                <el-option label="案例竞赛" :value="3"></el-option>
                <el-option label="决赛" :value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="name">
              <el-select style="width: 100px;" v-model="query.type" placeholder="全部">
                <el-option label="未发布" :value="0"></el-option>
                <el-option label="发布" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
              <el-button type="primary" icon="el-icon-plus" v-has-permi="['/wx/menu/postAddWxTag']" @click="handleAdd()">新增</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table v-loading="listLoading" :data="dataList" stripe border row-key="id">
        <el-table-column label="序号" align="center" width="60px">
          <template slot-scope="{$index}">
            <span>{{ $index+1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="规则名称" align="center">
          <template slot-scope="{row}">
            <span>{{ row.tagName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分类" align="center" prop="tagName">
          <template slot-scope="{row}">
            <span>{{ row.tagName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发布状态" align="center" prop="createTime">
          <template slot-scope="{row}">
            <span v-if="row.status===1">未发布</span>
            <span v-else>已发布</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button v-has-permi="['/wx/menu/postUpdateWxTag']" type="text" @click="handleUpdate(row)">编辑</el-button>
            <el-button v-has-permi="['/wx/menu/postDelWxTag']" type="text" @click="handleDelete(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加或修改菜单 -->
      <el-dialog :title="(formModel.id?'编辑':'新增')+'菜单'" :visible.sync="formVisible.a" width="600px" append-to-body>
        <el-form ref="formModel" :model="formModel" :rules="formModelRules" label-width="150px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="标签名称" prop="name">
                <el-input v-model.trim="formModel.name" style="width: 200px" clearable placeholder="请输入标签名称" maxlength="12" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="formVisible=!formVisible;reset;">取 消</el-button>
          <el-button :loading="submitLoading.s" type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
    <el-card class="box-card mb20">
      <div class="box-head">
        <span class="title">皮肤病大赛-评委</span>
        <div class="btns">
          <el-form ref="queryForm" :model="query" :inline="true" label-width="0">
            <el-form-item label="" label-width="0" prop="name">
              <el-input v-model.trim="query.name" placeholder="名称/手机号" clearable @change="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
              <el-button type="primary" icon="el-icon-plus" v-has-permi="['/wx/menu/postAddWxTag']" @click="handleAdd()">新增</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table v-loading="listLoading" :data="dataList" stripe border row-key="id">
        <el-table-column label="序号" align="center" width="60px">
          <template slot-scope="{$index}">
            <span>{{ $index+1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="每次" align="center">
          <template slot-scope="{row}">
            <span>{{ row.tagName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" align="center" prop="tagName">
          <template slot-scope="{row}">
            <span>{{ row.tagName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button v-has-permi="['/wx/menu/postUpdateWxTag']" type="text" @click="handleUpdate(row)">编辑</el-button>
            <el-button v-has-permi="['/wx/menu/postDelWxTag']" type="text" @click="handleDelete(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加或修改菜单 -->
      <el-dialog :title="(formModel.id?'编辑':'新增')+'菜单'" :visible.sync="formVisible.b" width="600px" append-to-body>
        <el-form ref="formModel" :model="formModel" :rules="formModelRules" label-width="150px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="标签名称" prop="name">
                <el-input v-model.trim="formModel.name" style="width: 200px" clearable placeholder="请输入标签名称" maxlength="12" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="formVisible=!formVisible;reset;">取 消</el-button>
          <el-button :loading="submitLoading.i" type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { signListPage, addSign, delSign, editSign } from '@/api/wechatService/sign'

export default {
  name: "index",
  data () {
    return {

      total: 0,
      // 列表数据
      query: {
        pageNum: 1,
        pageSize: 10,
        name: ''
      },
      dataList: [],
      listLoading: false,
      // 新增/编辑用户
      formVisible: {
        activity: false,
        study: false,
        exam: false,
      },
      submitLoading: {
        activity: false,
        study: false,
        exam: false
      },
      // 学习海报
      formStudyModel: {},
      formStudyModelRules: {
        name: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" }
        ]
      },
      // 活动海报
      formActivityModel: {},
      formActivityModelRules: {
        name: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" }
        ]
      },
      // 活动海报
      formExamModel: {},
      formExamModelRules: {
        name: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" }
        ]
      },
      formModel: {
        id: '',
        sort: null,
        sign: '',
        name: '',
        type: '',
        toUrl: '',
        miniproUrl: '',
        miniproAppId: '',
        miniPagePath: '',
        clickKey: '',
      },
      formModelRules: {
        name: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    handleQuery () {
      this.listLoading = true
      let params = {
        pageSize: this.query.pageSize,
        pageNum: this.query.pageNum,
      }
      if(this.query.name){
        params.conditions = {
          tagName: this.query.name
        }
      }
      signListPage(params).then(res => {
        this.dataList = res.data.records
        this.total = res.data.total
        this.listLoading = false
      }).catch(err => {
        if (err.code === -103) {
          this.$router.push('/403')
        }
        this.listLoading = false
      })
    },
    resetQuery () {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleAdd(type, row) {
      this.reset(type)
      if (row) {
        switch (type) {
          case 'activity':
            this.formActivityModel = {...row}
            break;
          case 'study':
            this.formStudyModel = {...row}
            break;
          default:
            break;
        }
      }
      this.$set(this.formVisible, type, !this.formVisible[type])
    },
    handleUpdate (row) {
      this.handleAdd(row)
    },
    handleDelete (id) {
      this.$confirm(`请确认是否要删除该标签?`, { type: 'warning' }).then(() => {
        let params = {
          id: id
        }
        delSign(params).then(() => {
          this.$message.success('删除成功')
          this.handleQuery()
        })
      })
    },
    // 新增/编辑
    submitForm () {
      this.submitLoading = true
      this.$refs["formModel"].validate(async valid => {
        if (valid) {
          let params = {}
          if(this.formModel.id){
            params.id = this.formModel.id
          }
          params.tagName = this.formModel.name
          try {
            if (this.formModel.id) {
              await editSign(params)
              this.$message.success('修改成功')
            } else {
              await addSign(params)
              this.$message.success('新增成功')
            }
            this.formVisible = !this.formVisible
            this.handleQuery()
            this.submitLoading = false
          } catch (error) {
            this.submitLoading = false
          }
        } else {
          this.submitLoading = false
        }
      })
    },
    // 表单重置
    reset (type) {
      switch (type) {
        case 'activity':
          this.formActivityModel = {}
          break;
        case 'study':
          this.formStudyModel = {}
          break;
        default:
          break;
      }
      this.resetForm(type)
    },
  },
  mounted () {
    this.handleQuery()
  },
}
</script>

<style lang="scss" scoped>
.box-card{
  &.h100{
    height: 100%;
  }
  .box-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.mb20{
  margin-bottom: 20px;
}
.dh {
  width: 0;
  height: 100px;
  background-color: #1c84c6;
  transition: all 1s;
}
.dh.show {
  width: 200px;
}
.dh.hide {
  width: 0;
}
</style>
